<template class="ant-list-item">
  <a-list-item v-for="(item, index) in props.pictureList" :key="index">
    <a-card hoverable style="width: 240px">
      <template #cover>
        <img alt="example" :src="item.url" />
      </template>
      <a-card-meta :title="item.title">
        <template #description>{{ item.title }}</template>
      </a-card-meta>
    </a-card>
  </a-list-item>
</template>
<script setup lang="ts">
import { withDefaults, defineProps } from "vue";

interface Props {
  pictureList: any[];
}

const props = withDefaults(defineProps<Props>(), {
  pictureList: () => [],
});
</script>

<style scoped>
.ant-list-item {
  display: inline-block;
  margin-left: 10px;
}
</style>
